<template>
  <div>
    <ElTable :data="PermissionArr" style="width: 100%; margin-bottom: 20px" row-key="id" border>
      <ElTableColumn label="名称" prop="name"></ElTableColumn>
      <ElTableColumn label="权限值" prop="code"> </ElTableColumn>
      <ElTableColumn label="修改时间" prop="updataTime"> </ElTableColumn>
      <ElTableColumn label="操作">
        <template #="{ row, index }">
          <el-button
            type="primary"
            size="small"
            @click="AddPermission(row)"
            v-has="'btn.Permission.add'"
            >{{ row.level != 4 ? '添加菜单' : '添加功能' }}</el-button
          >
          <el-button
            type="primary"
            size="small"
            icon="edit"
            @click="UpdataPermission(row)"
            :disabled="row.level == 1 || row.level == 4 ? true : false"
            v-has="'btn.Permission.update'"
            >编辑</el-button
          >
          <el-button
            type="primary"
            size="small"
            icon="Delete"
            @click="DelPermission(row)"
            :disabled="row.level == 1 ? true : false"
            v-has="'btn.Permission.remove'"
            >删除</el-button
          >
        </template>
      </ElTableColumn>
    </ElTable>
    <el-dialog v-model="dialogVisible" title="添加菜单">
      <ElForm ref="formRef" :model="menuParams" :rules="rule">
        <ElFormItem label="名称" prop="name">
          <ElInput placeholder="请输入菜单名称" v-model="menuParams.name"></ElInput>
        </ElFormItem>
        <ElFormItem label="权限" prop="code">
          <ElInput placeholder="请输入权限名称" v-model="menuParams.code"></ElInput>
        </ElFormItem>
      </ElForm>
      <template #footer>
        <el-button type="primary" @click="AddOrUpdataRole">确定</el-button>
        <el-button type="primary" @click="dialogVisible = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="Permission">
import {
  reqAddPermission,
  reqDelPermission,
  reqGetPermission,
  reqUpdataPermisstion
} from '@/API/acl/permission'
import { MenuParams, Permisstion, PermisstionList } from '@/API/acl/permission/type'
import { FormRules, menuProps } from 'element-plus'
import { onMounted, ref, reactive } from 'vue'
let dialogVisible = ref(false)
let PermissionArr = ref([])
let formRef = ref()
/*
  根据有无id来选择是否为新增或者编辑,
  根据pid来选择为哪个菜单添加功能或者菜单.
*/
let menuParams = ref<MenuParams>({
  name: '',
  pid: 0,
  code: '',
  level: 0
})
const HasPermissionArr = async () => {
  let result = await reqGetPermission()
  if (result.code == 200) {
    PermissionArr.value = result.data
  }
  console.log(PermissionArr.value)
}
const AddPermission = (row: Permisstion) => {
  Object.assign(menuParams.value, {
    id: 0,
    name: '',
    pid: 0,
    code: '',
    level: 0
  })
  dialogVisible.value = true
  menuParams.value.level = row.level + 1
  menuParams.value.pid = row.pid as number
}
const UpdataPermission = (row: Permisstion) => {
  Object.assign(menuParams.value, row)
  dialogVisible.value = true
}
const nameRule = (rule, value, cb) => {
  if (!value) {
    cb(new Error('不能为空值'))
  } else if (value.replace(/\s+/g, '').length < 4) {
    cb(new Error('少于4个字符串'))
  } else {
    cb()
  }
}
let rule = reactive<FormRules>({
  name: [
    {
      validator: nameRule,
      required: true,
      message: '不能少于4个字符',
      trigger: 'blur'
    }
  ],
  code: [
    {
      validator: nameRule,
      required: true,
      message: '不能少于4个字符',
      trigger: 'blur'
    }
  ]
})
const AddOrUpdataRole = async () => {
  await formRef.value.validate()
  if (menuParams.value.pid == 0) {
    menuParams.value.pid = 1
  }
  let result
  if (menuParams.value.id) {
    result = await reqUpdataPermisstion(menuParams.value)
  } else {
    result = await reqAddPermission(menuParams.value)
  }
  if (result.code == 200) {
    dialogVisible.value = false
    ElMessage({ type: 'success', message: menuParams.value.id ? '修改成功' : '添加成功' })
    HasPermissionArr()
  }
}
const DelPermission = async (row: Permisstion) => {
  ElMessageBox.confirm('确定删除角色数据吗?', '删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      let result = await reqDelPermission(row.id)
      if (result.code == 200) {
        ElMessage({ type: 'success', message: '删除成功' })
      }
      HasPermissionArr()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消'
      })
    })
}

onMounted(() => {
  HasPermissionArr()
})
</script>

<style scoped></style>
